<template>
  <div class="strut-div">
    <div id="gov-category" class="strut-div" style="width:460px;float:right;"></div>
    <div style="width:40px;float: left;margin-top: 25px;text-align: left;">
      <ul>
        <li style="margin: 38px 0 0 5px;"><img src="../../assets/imgs/rank-one.png" alt=""></li>
        <li style="margin: 2px 0 0 5px;"><img src="../../assets/imgs/rank-two.png" alt=""></li>
        <li style="margin: 2px 0 0 5px;"><img src="../../assets/imgs/rank-three.png" alt=""></li>
        <li style="margin: 2px 0 0 5px;"><img src="../../assets/imgs/rank-four.png" alt=""></li>
        <li style="margin: 2px 0 0 5px;"><img src="../../assets/imgs/rank-five.png" alt=""></li>
        <li style="margin: 2px 0 0 5px;"><img src="../../assets/imgs/rank-six.png" alt=""></li>
        <li style="margin: 2px 0 0 5px;"><img src="../../assets/imgs/rank-seven.png" alt=""></li>
        <li style="margin: 3px 0 0 5px;"><img src="../../assets/imgs/rank-eight.png" alt=""></li>
        <li style="margin: 3px 0 0 5px;"><img src="../../assets/imgs/rank-nine.png" alt=""></li>
        <li style="margin: 3px 0 0 5px;"><img src="../../assets/imgs/rank-ten.png" alt=""></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: "GovCategoryChart",
    props: ['config'],
    data() {
      return {
        chart: null,
      }
    },
    methods: {
      initChart() {
        console.log('initCategoryChart');
        let option = {
          title: {
            text: '',
            subtext: ''
          },
          barWidth: 12,
          itemGap: 20,
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: '', // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
            },
          },
          legend: {
            data: ['平均办理时间', '等待人数'],
            top: 20,
            left: 8,
            textStyle: {
              color: '#E9F4FF',
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: ['住建局', '环保局', '卫计局', '财政局', '安监局', '中小企业', '国土局', '教育局', '公安局', '新农合'],
            axisLine: {
              show: false
            }
          },
          series: [
            {
              name: '平均办理时间',
              type: 'bar',
              data: [3, 6, 7, 8, 9, 10, 11, 12, 14, 15],
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 1, color: '#0DC6E6'},
                      {offset: 0, color: '#2A7BC8'}
                    ]
                  ),
                  label: {
                    show: true,   //显示文本
                    position: 'right',  //数据值位置
                    textStyle: {
                      color: '#FBCC13',
                      fontSize: '12'
                    }
                  }
                },
                emphasis: {
                  barBorderRadius: 4
                }
              },
            },
            {
              name: '等待人数',
              type: 'bar',
              data: [15, 10, 10, 20, 15, 10, 20, 15, 20, 10],
              itemStyle: {
                normal: {
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 1, color: '#FFC93D'},
                      {offset: 0, color: '#EF6421'}
                    ]
                  ),
                  label: {
                    show: true,   //显示文本
                    position: 'right',  //数据值位置
                    textStyle: {
                      color: '#FBCC13',
                      fontSize: '12'
                    }
                  }
                },
                emphasis: {
                  barBorderRadius: 4
                },
              }
            }
          ],
          textStyle: {
            color: '#E9F4FF'
          }
        };

        setTimeout(() => {
          // option.xAxis.data = ['行政处罚', '周二', '周三', '周四', '周五', '周六', '周日'];
          // option.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320];

          this.chart.setOption(option);
        }, 300);
      },
      refreshChart() {

      },
    },
    mounted() {
      console.log("mounted");
      this.chart = echarts.init(document.getElementById('gov-category'));
    }

  }
</script>

<style scoped lang="scss" type="text/scss">

  $gov-pie-list: url("../../assets/imgs/rank-one.png");
  ul {
    padding: 0;
  }

  ul li {
    list-style-type: none;
  }
</style>
